<template>
	<div style="display: flex; justify-content: center; margin-top: 150px;">
		<el-card style="width: 550px; margin-bottom: 350px;">
			<div>
				<h1 style="color:#409EFF; display:flex; justify-content:center; margin-top:10px">修改密码</h1>
			</div>
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
				<el-form-item label="旧密码" prop="oldPass">
					<el-input v-model="form.oldPass" type="password" show-password style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" type="password" show-password style="width: 80%"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input v-model="form.checkPass" type="password" show-password style="width: 80%"></el-input>
				</el-form-item>

			</el-form>

			<el-row>
				<el-col :span="8" />
				<el-col :span="8">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="save">确 定</el-button>
				</el-col>
				<el-col :span="8" />
			</el-row>

		</el-card>

	</div>

</template>

<script>
	import {
		ElMessage
	} from 'element-plus'


	export default {
		data() {

			const oldPass = (rule, value, callback) => {
				if (!this.editJudge) {
					if (value == "") {
						callback(new Error("请输入旧密码"));
					} else if (value !== this.oldPass) {
						callback(new Error("旧密码错误!"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};



			const checkPass = (rule, value, callback) => {
				if (!this.editJudge) {
					if (value == "") {
						callback(new Error("请再次输入密码"));
					} else if (value !== this.form.password) {
						callback(new Error("两次输入密码不一致!"));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};

			return {
				truePass: '',

				form: {
					id: '',
					username: '',
					oldPassword: '',
					cheackPassword: '',
					password: '',
					telphone: '',
					mail: '',
					role: '',
				},

				rules: {
					password: [{
						required: true,
						message: "请输入密码",
						trigger: "blur"
					}, ],

					checkPass: [{
							required: true,
							message: "请再次输入密码",
							trigger: "blur"
						},
						{
							validator: checkPass,
							trigger: "blur"
						},
					],
					oldPass: [{
							required: true,
							message: "请输入旧密码",
							trigger: "blur"
						},
						{
							validator: oldPass,
							trigger: "blur"
						},
					]

				}
			}
		},


		created() {
			let userId = window.sessionStorage.getItem("userId");
			this.$api.get("/user/" + userId)
				.then((res) => {
					if (res.data.code === '200') {
						this.form = res.data.data;
						this.oldPass = res.data.data.password;
						this.form.password = "";
					} else {
						ElMessage.error(res.data.msg)
					}

				});
		},

		methods: {



			reset() {
				this.loginFrom.password = '';
				this.loginFrom.oldPass = '';
				this.loginFrom.cheackPass = '';
			},

			save() {

				this.$refs.form.validate((valid) => {

					if (valid) {
						this.$api.put("/user/update", this.form)
							.then((res) => {
								if (res.data.code === '200') {
									ElMessage({
										message: "修改成功",
										type: 'success',
									})
									this.$refs.form.resetFields();
								} else {
									ElMessage.error(res.data.msg)
								}

							});
					}

				})

			},

		}
	}
</script>

<style>
</style>
